<template>
  <div class="left-chart-2">
    <div class="lc-details" v-if="lcData">
      <div class="ldd">
        <p>计划日产能</p>
        <input style="background:transparent;border:0;text-indent:20px;outline:none;color:#fff;font-size:16px;" type="text" v-model="lcData.planned_daily_output" placeholder="" />
      </div>
      <div class="ldd">
        <p>当前完成产能</p><span>{{lcData.current_date_complete_output}}</span>
      </div>
      <div class="ldd">
        <p>当前完成百分比</p><span>{{lcData.current_date_complete_ratio + '%'}}</span>
      </div>
      <div class="ldd">
        <p>标准产能</p><span>{{lcData.standard_output}}</span>
      </div>
      <div class="ldd">
        <p>时间开动率</p><span>{{lcData.time_efficiency + '%'}}</span>
      </div>
      <div class="ldd">
        <p>性能开动率</p><span>{{lcData.performance_efficiency + '%'}}</span>
      </div>
      <div class="ldd">
        <p>净开动率</p><span>{{lcData.rate_efficiency + '%'}}</span>
      </div>
      <div class="ldd">
        <p>速度开动率</p><span>{{lcData.operational_efficiency + '%'}}</span>
      </div>
      <div class="ldd">
        <p>合格品率</p><span>{{lcData.quality_rate + '%'}}</span>
      </div>
    </div>

  </div>
</template>
<script>
import { stationDetails } from "@/network/home.js";
export default {
  name: "LeftChart2",
  props:{
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timer:null,
      lcData:{}
    }
  },
  watch:{
    stationId: function(){
      if(this.stationId > 0 ){
        this.getlist()
      }
    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
    this.lcData = {};
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed");
    this.lcData = {};
  },
  mounted() {
    this.getStationDetails();
    this.getlist()
  },
  
  methods: {
    getlist(){
      let num = 0;
      //创建并执行定时器
      this.timer = setInterval(() => {
        this.getStationDetails();
        //当num等于100时清除option 
        if (num % 10 == 0) {
          this.lcData = {};
        }
        num++;
      }, 10000);
    },
    getStationDetails(){
      stationDetails({stationId:this.stationId}).then((res) => {
        this.lcData = res.data.data
      })
    }
  },
  
};
</script>
<style lang="less">
.left-chart-2 {
  height: 49%;

  input::-webkit-input-placeholder {
    color: #fff;font-size: 16px;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;font-size: 16px;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;font-size: 16px;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;font-size: 16px;
  }

  .lc-details {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: 6%;
    box-sizing: border-box;
    font-size: 18px;

   .ldd {
      // height: 44px;
      display: flex;
      align-items: center;
      p {
        width: 100%;
        margin: 0;
        text-align: left;
      }
      .lddd{
        width: 100%;
        text-align: left;
        
        .lc-bg{
          display: inline-block;
          padding: 1% 3%;
          vertical-align: middle;
         
          span{
            font-size: 14px;
          }
          img{width:22px;vertical-align: middle;}
        }
      }

      span {
        width: 100%;
        font-size: 16px;
        text-align: left;
      }
    }
  }
}
</style>